import React from 'react'
import {useEffect} from "react"
import {useSelector,useDispatch} from "react-redux"
import * as action from "../../action"
import { ProductCard, Tag, Button } from 'react-vant';
import {useNavigate} from "react-router-dom"
function Home() {
  let navigate = useNavigate()
  let dispatch = useDispatch()
  let store = useSelector((state)=>{
    return {
      ...state.shopreducer
    }
  })
  useEffect(()=>{ // 1.在组件中去调用action中的方法
    dispatch(action.getlist())
  
  },[])
  let goDetail = (item)=> {
      navigate("/detail",{
        state:item
      })
  }
  return (
    <>
      {
        store.arr && store.arr.length ? store.arr.map((item,index)=>{
            return  <ProductCard
            onClick={()=>goDetail(item)}
            num={item.num}
            key={index}
            price={item.price}
            desc={item.desc}
            title={item.tit}
            thumb={item.img}
          />
        }):""
      }
    </>
  )
}

export default Home